import { ComponentStory, ComponentMeta } from "@storybook/react";
import { ThemeDecorator } from "shared/config/storybook/ThemeDecorator/ThemeDecorator";
import { Theme } from "app/providers/ThemeProvider";
import { Button, SizeButton, ThemeButton } from "./Button";

export default {
  title: "shared/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
  },
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const NoTheme = Template.bind({});
NoTheme.args = {
  children: "Text",
};

export const Clear = Template.bind({});
Clear.args = {
  children: "Text",
  theme: ThemeButton.CLEAR,
};

export const Outlined = Template.bind({});
Outlined.args = {
  children: "Text",
  theme: ThemeButton.OUTLINED,
};

export const OutlinedDark = Template.bind({});
OutlinedDark.args = {
  children: "Text",
  theme: ThemeButton.OUTLINED,
};
OutlinedDark.decorators = [ThemeDecorator(Theme.DARK)];

export const PrimaryBackground = Template.bind({});
PrimaryBackground.args = {
  children: "Text",
  theme: ThemeButton.PRIMARY,
};

export const SecondaryBackground = Template.bind({});
SecondaryBackground.args = {
  children: "Text",
  theme: ThemeButton.SECONDARY,
};
SecondaryBackground.decorators = [ThemeDecorator(Theme.DARK)];

export const Square = Template.bind({});
Square.args = {
  children: "Text",
  theme: ThemeButton.SECONDARY,
  square: true,
};
Square.decorators = [ThemeDecorator(Theme.DARK)];

export const SizeM = Template.bind({});
SizeM.args = {
  children: "Text",
  theme: ThemeButton.SECONDARY,
  square: true,
  size: SizeButton.M,
};
SizeM.decorators = [ThemeDecorator(Theme.DARK)];

export const SizeL = Template.bind({});
SizeL.args = {
  children: "Text",
  theme: ThemeButton.SECONDARY,
  square: true,
  size: SizeButton.L,
};
SizeL.decorators = [ThemeDecorator(Theme.DARK)];

export const SizeXL = Template.bind({});
SizeXL.args = {
  children: "Text",
  theme: ThemeButton.SECONDARY,
  square: true,
  size: SizeButton.XL,
};
SizeXL.decorators = [ThemeDecorator(Theme.DARK)];
